<template>
  <q-page class="cc-member row">
    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-table flat color="primary" class="cross_table" separator="cell" :columns="columns" :data="list" row-key="id"
        :pagination.sync="pagination" :visible-columns="group" @request="query"
        :rows-per-page-options="[10, 20, 50, 100]" :loading="loading" :selected.sync="selected">
        <template v-slot:top="table">
          <div class="row no-wrap full-width">
            <div class="q-pa-md">
              <q-select filled v-model="status_model" :options="options" @input="onValueChange" />
            </div>
            <!--<div class="q-pa-md">
              <q-select filled v-model="group_model" clearable :options="groupOptions" :options-dense="true"  @input="onGroupValueChange">
                <template v-slot:prepend>
                  <q-icon name="place" @click.stop.prevent />
                </template>
              </q-select>
            </div>
            <div class="q-pa-md">
              <q-input clearable outlined placeholder="请输入推荐id" v-model="recommend_id"></q-input>
            </div>-->
            <div class="q-pa-md">
              <q-input clearable outlined placeholder="请输入uid" @input="query" v-model="uid">
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-md">
              <q-input clearable outlined placeholder="请输入用户名搜索"  @input="query" v-model="username" >
                <template v-slot:prepend>
                  <q-icon name="mdi-account" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-md">
              <q-input clearable outlined placeholder="请输入手机号搜索" @input="query" v-model="mobile" >
                <template v-slot:prepend>
                  <q-icon name="phone" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <q-space />
            <div class="q-gutter-xs">
              <!-- <q-btn icon="add" no-wrap color="primary" label="新建" @click="add('article')" /> -->
              <q-btn icon="mdi-restore" no-wrap color="primary" label="刷新" @click="refresh" />
            </div>
          </div>
        </template>
        <!--<template #body-cell-email="props">
          <q-td key="email" :props="props">
            <q-item v-if="props.row.email==1">显示</q-item>
            <q-item v-if="props.row.email==0">隐藏</q-item>
          </q-td>
        </template> -->
        <template #body-cell-status="props">
          <q-td key="status" :props="props">
            <div v-if="props.row.status==2">已认证</div>
            <div v-if="props.row.status==1">未认证</div>
            <div v-if="props.row.status==0">未定义</div>
          </q-td>
        </template>
        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <q-btn dense color="primary" @click="fans_list(props.row)">
              用户粉丝
            </q-btn>
          </q-td>
        </template>
        <template #body-cell-opt3="props">
          <q-td :props="props" :auto-width="true">
            <q-btn  dense color="primary">
              优惠券列表
            </q-btn>
          </q-td>
        </template>
        <template #body-cell-detail="props">
          <q-td :props="props" :auto-width="true">
            <q-btn outline dense color="primary" style="width:100px;" @click="detail_link(props.row)"> 会员详情 </q-btn>
          </q-td>
        </template>
        <template #body-cell-opt2="props">
          <q-td :props="props" :auto-width="true">
            <q-btn outline dense color="primary"style="width:100px;" @click="userstockadd(props.row)"> 发放股权 </q-btn>
            <!--<q-btn  dense color="primary"  >
              财务信息
            </q-btn>
            <q-btn dense color="primary" @click="openDialogAccountlog2(props.row)">
              期权明细
            </q-btn>-->
          </q-td>
        </template>
        <template #body-cell-opt4="props">
          <q-td :props="props" :auto-width="true">
            <q-btn outline dense color="red" style="width:100px;" @click="deleteRow(props.row)"> 删除 </q-btn>
          </q-td>
        </template>
      </q-table>
      <q-item-section><div style="padding: 20px;">总人数：{{pagination.rowsNumber}}</div></q-item-section>
    </div>
    <q-dialog maximized flat persistent ref="dialog">
      <q-form @submit="onSubmit" class="dialog_card column" @reset="onReset">
        <h5 class="view_title justify-between q-px-md">
          {{ editType }}管理员
          <q-btn outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <q-scroll-area class="col">
          <div class="row q-col-gutter-x-md dialog_form q-pa-md hidden">
            <div class="col-3">
              <h5><q-icon name="star" color="red" />管理员id：</h5>
              <div class="q-col-gutter-x-md">
                <q-input outlined disable v-model="form.id" type="text" />
              </div>
            </div>
          </div>

          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-5">
              <h5><q-icon name="star" color="red" />管理员名称：</h5>
              <div class="q-col-gutter-x-md">
                <q-input outlined v-model="form.name" type="text" :rules="[requiredTest]" />
              </div>
            </div>
          </div>

          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-3">
              <h5>密码：</h5>
              <div class="q-col-gutter-x-md">
                <q-input v-model="form.password" type="password" />
              </div>
            </div>
          </div>

          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-3">
              <h5>管理员邮箱：</h5>
              <div class="q-col-gutter-x-md">
                <q-input v-model="form.email" type="text" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-md"></div>
          <div class="row justify-center q-pa-md">
            <div class="col-md-1 text-center">
              <q-btn class="no-border-radius" unelevated type="submit" :loading="loading" icon="camera_enhance"
                color="primary" label="保 存" size="md">
                <template v-slot:loading>
                  <q-spinner-hourglass class="on-left" />保存...
                </template>
              </q-btn>
            </div>

            <div class="col-md-1 text-center">
              <q-btn class="no-border-radius" unelevated v-close-popup type="button" outline style="color: goldenrod"
                icon="camera_enhance" label="关闭" size="md"></q-btn>
            </div>
          </div>
        </q-scroll-area>
      </q-form>
    </q-dialog>

    <!-- 弹出用户发放股权  -start-  -->
    <q-dialog maximized flat persistent ref="userstockadd_dialog" class="userstockadd-dialog">
      <q-form @submit="userstockSubmit" class="dialog_card column" @reset="onReset">
        <h5 class="view_title justify-between q-px-md">
          发放股权
          <q-btn outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <q-scroll-area class="col">
          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-3">
              <h5><q-icon name="star" color="red" />用户id：</h5>
              <div class="q-col-gutter-x-md">
                <q-input outlined disable v-model="frmstock.uid" type="text" readonly />
              </div>
            </div>
          </div>

          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-3">
              <h5><q-icon name="star" color="red" />实名：</h5>
              <div class="q-col-gutter-x-md">
                <q-input outlined disable v-model="frmstock.true_name" type="text" readonly />
              </div>
            </div>
          </div>

          <div class="row q-col-gutter-x-md dialog_form q-pa-md">
            <div class="col-5">
              <h5><q-icon name="star" color="red" />股权金额：</h5>
              <div class="q-col-gutter-x-md">
                <q-input outlined v-model="frmstock.amount" type="text" :rules="[requiredTest]" />
              </div>
            </div>
          </div>

          <div class="row justify-center q-pa-md">
            <div class="col-md-1 text-center">
              <q-btn class="no-border-radius" unelevated type="submit" :loading="loading" icon="camera_enhance"
                color="primary" label="保 存" size="md">
                <template v-slot:loading>
                  <q-spinner-hourglass class="on-left" />保存...
                </template>
              </q-btn>
            </div>

            <div class="col-md-1 text-center">
              <q-btn class="no-border-radius" unelevated v-close-popup type="button" outline style="color: goldenrod"
                icon="camera_enhance" label="关闭" size="md"></q-btn>
            </div>
          </div>
        </q-scroll-area>
      </q-form>
    </q-dialog>
    <!-- 通证流水明细列表  -->
    <q-dialog ref="dialog_accountlog" maximized flat persistent>
      <q-form class="dialog_card column">
        <h5 class="view_title justify-between q-px-md">
          通证流水明细
          <q-btn outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <q-scroll-area class="col">
          <div class="row q-col-gutter-x-md dialog_form q-pa-md  ">
            <div class="col-11">
              <h5>ID:</h5>
              <q-input outlined dense v-model="accountloglist.id" disable />
            </div>

            <div class="col-11">
              <h5>管理员号:</h5>
              <q-input outlined dense v-model="accountloglist.adminId" disable />
            </div>

            <div class="col-11">
              <h5>用户号:</h5>
              <q-input outlined dense v-model="accountloglist.userId" disable />
            </div>

            <div class="col-11">
              <h5>类型:</h5>
              <q-input outlined dense v-model="accountloglist.type" disable />
            </div>

            <div class="col-11">
              <h5>操作类型:</h5>
              <q-input outlined dense v-model="accountloglist.event" disable />
            </div>

            <div class="col-11">
              <h5>源ID号:</h5>
              <q-input outlined dense v-model="accountloglist.sourceId" disable />
            </div>

            <div class="col-11">
              <h5>时间:</h5>
              <q-input outlined dense v-model="accountloglist.time" disable />
            </div>

            <div class="col-11">
              <h5>当前金额:</h5>
              <q-input outlined dense v-model="accountloglist.amount" disable />
            </div>

            <div class="col-11">
              <h5>变化之前的金额:</h5>
              <q-input outlined dense v-model="accountloglist.amountLog" disable />
            </div>

            <div class="col-11">
              <h5>备注:</h5>
              <q-input outlined dense v-model="accountloglist.note" disable />
            </div>
          </div>
        </q-scroll-area>

        <div class="row justify-center q-pa-md">
          <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
        </div>
      </q-form>
    </q-dialog>
    <!-- 通证流水明细列表  end -->
  </q-page>
</template>

<script>
  import { IndexMixin } from "boot/mixins";
  import confirm from "components/confirm";
  import { requiredTest } from "boot/inputTest";
  import { date } from "quasar";
  const today = new Date();
  const { addToDate, subtractFromDate } = date;
  export default {
    name: "memberList",
    mixins: [IndexMixin],
    components: {
      confirm,
    },
    // props: ["status"],
    data() {
      return {
        columns: [
          { name: "user_id", align: "center", label: "用户ID", field: "user_id" },
          { name: "true_name",  align: "center", label: "用户姓名", field: "true_name", },
          { name: "mobile", align: "center", label: "电话", field: "mobile" },
          // { name: "point", align: "center", label: "积分数", field: "point" },
          { name: "status", align: "center", label: "状态", field: "status" },
          // { name: "balance",  align: "center", label: "用户余额", field: "balance", },
          { name: "time", align: "center", label: "时间", field: "time" },
          // { name: "email", align: "center", label: "邮件", field: "email" },
          // { name: "balance_freeze", align: "center",  label: "冻结的用户余额", field: "balance_freeze", },
          // { name: "commission",align: "center", label: "佣金",field: "commission",},
          // { name: "commission_wait", align: "center", label: "冻结佣金", field: "commission_wait", },
          // { name: "opt", align: "center", label: "粉丝管理" },
          // { name: "opt2", align: "center", label: "财务管理"  },
          // { name: "opt3", align: "center", label: "优惠券管理"  },
          { name: "detail", align: "center", label: "会员详情"  },
          { name: "opt4", align: "center", label: "删除"  }
        ],
        mytickercolumns: [
          { name: "name", align: "center", label: "名称", field: "name", },
          { name: "user_name", align: "center", label: "用户名", field: "user_name", },
          { name: "create_time", align: "center", label: "领取优惠券时间", field: "create_time", },
        ],
        loading: true,
        showQuery: true,
        headers: [{ name: "Authorization", value: localStorage.Authorization }],
        uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
        imgUrl: `${process.env.BASE_URL}/sys/common/static`,
        url: {
          list: "/userlist"
        },
        form: {
          id: "",
          member_name: "",
          password: "",
          description: "",
          content: "",
          email: true,
          top: false,
          sort: 100,
        },
        file_list: [],
        isEdit: 0,
        uid: '',
        username: '',
        group_id: 0,
        group_model: { label: "全部" , value: -1},
        status: '',
        status_model: { label: "全部用户" , value: 0},
        options: [
          { label: "全部用户" , value: 0},
          { label: "已认证用户" , value: 2},
          { label: "未认证用户" , value: 1}
        ],
        groupOptions: [
          { label: "普通用户" , value: 0},
          { label: "服务商" , value: 1},
        ],
        options2: [],
        fanslist: [],
        myticketlist:[],
        fansPagination: {
          page: 1,
          rowsPerPage: 10,
          descending: false,
          rowsNumber: 0,
        },
        userstockadd_dialog: false,
        frmstock: {
          uid: 0,
          amount: 0,
          true_name: "",
        },
        dialog_stocklog: false,
        stocklog: {
          adminId: 0,
        },
        dialog_accountlog: false,
        accountloglist: {},
        dialog_myticketlist:false,
        ticketlist:[],
        stockcolumns:[
          {
            name: "adminId",
            align: "center",
            label: "管理员号",
            field: "adminId",
          },
          {
            name: "userId",
            align: "center",
            label: "冻结佣金",
            field: "userId",
          },
          {
            name: "type",
            align: "center",
            label: "类型",
            field: "type",
          },
          {
            name: "event",
            align: "center",
            label: "操作类型",
            field: "event",
          },{
            name: "sourceId",
            align: "center",
            label: "源ID号",
            field: "sourceId",
          },
          // {
          //   name: "time",
          //   align: "center",
          //   label: "时间",
          //   field: "time",
          // },
          {
            name: "amount",
            align: "center",
            label: "当前金额",
            field: "amount",
          },
          {
            name: "amountLog",
            align: "center",
            label: "变化之前的金额",
            field: "amountLog",
          },
          {
            name: "note",
            align: "center",
            label: "备注",
            field: "note",
          }
        ],
        stocklist:[],
        stockPagination:{
          page: 1,
          rowsPerPage: 10,
          descending: false,
          rowsNumber: 0
        },
      };
    },
    methods: {
      requiredTest,
      addBefore() {
        this.form.catalogId = this.catalog;
        return true;
      },
      selectCatalog(n) {
        this.catalog = n;
        this.query();
      },
      getTypeLabel(b) {
        if (b == 0) {
          return "隐藏";
        } else {
          return "显示";
        }
      },
      queryParam() {
        //组合查询参数
        if (this.mobile != '') {
          this.searchForm.mobile = this.mobile;
        }else{
          delete this.searchForm.mobile
        }
         if(this.username != ''){
          this.searchForm.name = this.username;
        }else{
          delete this.searchForm.name
        }
        console.log(this.username)
        if(this.status_model.value == 1){
          this.searchForm.status = 1
        }else if(this.status_model.value == 2){
          this.searchForm.status = 2
        }else{
          delete this.searchForm.status
        }
        if(this.uid && this.uid > 0){
          this.searchForm.uid = this.uid
        }else{
          delete this.searchForm.uid
        }
        this.searchForm.group_id = 0
        // this.searchForm.status = 1
      },
      checkPhoneNumber(phoneNumber) {
        // 定义一个正则表达式，匹配以1开头，后面跟10位数字的字符串
        var reg = /^1\d{10}$/;
        return reg.test(phoneNumber);
      },
      initDict() {
        const name = this.$route.query.name ?this.$route.query.name : ''
        this.username = name
      },
      onSubmit(evt) {
        console.log(this.form);
        if (this.isEdit) {
          //this.form.attachments = this.file_list
        }
        let url = "";
        if (this.isEdit == 1) {
          url = this.url.edit;
        } else {
          url = this.url.add;
        }
        this.$axios.post(url, this.form).then((r) => {
          this.babyWord = r;
          if (r.code == 0) {
            this.file_list = [];
            this.$q.notify({
              position: "top",
              color: "info",
              textColor: "white",
              icon: "cloud_done",
              group: false,
              html: true,
              message: "保存成功！！",
            });
            this.refresh();
            this.onReset();
            this.$refs.dialog.hide();
          } else {
            this.$q.notify({
              position: "top",
              color: "info",
              textColor: "white",
              icon: "cloud_done",
              group: false,
              html: true,
              message: "保存成功！！" + r.code,
            });
          }
        });
        //evt.target.submit()
      },
      onReset() {
        this.form = {
          id: 0,
          member_name: "",
          password: "",
          email: true,
        };
      },
      refresh() {
        // this.$axios.post("/userlist", {"status":"1", "key":"", "page":this.pagination.page, "limit":this.pagination.rowsPerPage }).then((r) => {
        //   this.list = r.data;
        // });
        this.query()
      },
      onValueChange(val) {
        this.status_model = val;
        this.searchForm.status = this.status_model.value;
        this.query();
      },
      onGroupValueChange(val) {
        this.group_model = val;
        this.group_id = this.group_model.value
        if(this.group_id >= 0){
          this.searchForm.group_id = this.group_id
        }else{
          delete this.searchForm.group_id
        }
        this.query();
      },
      fans_list(row, page = 1) {
        this.$router.push({
          path: '/fans/list',
          query: { id: row.user_id}
        })
      },
      detail_link(row){
        this.$router.push({
          path: '/member/detail',
          query: { id: row.user_id, name: this.username }
        })
      },
      userstockadd(row) {
        this.frmstock.uid = row.user_id;
        this.frmstock.true_name = row.true_name;
        this.$refs.userstockadd_dialog.show();
      },
      userstockSubmit() {
        this.$axios.post("/stockadd", this.frmstock).then((r) => {
          if (r.code == 0) {
            this.file_list = [];
            this.$q.notify({
              position: "top",
              color: "info",
              textColor: "white",
              icon: "cloud_done",
              group: false,
              html: true,
              message: "保存成功！！",
            });
            this.refresh();
            this.onReset();
            this.$refs.userstockadd_dialog.hide();
          } else {
            this.$q.notify({
              position: "top",
              color: "info",
              textColor: "white",
              icon: "cloud_done",
              group: false,
              html: true,
              message: "保存成功！！" + r.code,
            });
          }
        });
      },
      openDialogStocklog(row) {
        const url = "/stockloglist";
        this.$axios.post(url, { uid: row.user_id }).then((r) => {
          if (r.code == 0) {
            this.stocklog = r.data[0];
            this.$refs.dialog_stocklog.show();
          } else {
            this.$q.notify({ position: 'top', color: 'error', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: '操作失败！！', });
          }
        });
      },
      openDialogAccountlog(row) {
        const url = "/accountloglist";
        this.$axios.post(url, { uid: row.user_id }).then((r) => {
          if (r.code == 0) {
            this.accountloglist = r.data[0];
            this.$refs.dialog_accountlog.show();
          } else {
            this.$q.notify({ position: 'top', color: 'error', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: '操作失败！！', });
          }
        });
      },
      openDialogMyticketlist(row) {
        //我的优惠券
        const url = "/ticketloglist";
        this.$axios.post(url, { uid: row.user_id }).then((r) => {
          if (r.code == 0) {

            this.myticketlist = r.data ;
            this.$refs.dialog_myticketlist.show();
          } else {
            this.$q.notify({ position: 'top', color: 'error', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: '操作失败！！', });
          }
        });
      },
      deleteRow(row) {
        const confirm_ = window.confirm('此操作将永久删除该人员, 是否继续?')
        if(confirm_) {
          this.$axios.post("/userdelete", {"ids": row.user_id}).then((r) => {
            this.$q.notify({
              position: 'top', color: 'success', textColor: 'blue', group: false, html: true, message: '删除成功！！',
            });
            this.refresh();
          });
          // deleteUser(row.id).then(res => {
          //   this.$q.notify({
          //     position: 'top', color: 'success', textColor: 'blue', group: false, html: true, message: '删除成功！！',
          //   });
          //   if (res.code == 0) {
          //     this.getList();
          //   }
          // })
        }else{
          console.log(0)
        }
      }
    },
    created() {
      this.initDict();
    },
    mounted() {

    },
  };
</script>

<style></style>
